<template>
  <div>
    <top-nav title="朋友圈"></top-nav>

    <section>
      <div class="person-wall" id="circle-user">
        <a class="bg-top-right" href=""></a>
      </div>
      <div class="frame2" id="con2">
        <router-link to="/circle/left" class="frame2-bg e42630" style="margin: 0 2% 0 4%;">
          <img class="w2-pd5-bdr" src="/static/img/user/dollar-red-50@2x.png">
          共<span>111</span>元
        </router-link>
        <router-link to="/circle/right" class="frame2-bg e42630">
          <img class="w2-pd5-bdr" src="/static/img/user/face-red-50@2x.png">
          已邀请<span>11</span>位好友
        </router-link>
        <a class="btn-bg-11" href="/account/share.html">邀请好友来赚钱</a>
      </div>
      <div class="circle-cont">
        <router-view></router-view>
      </div>
    </section>

    <nav-bar>
      <nav-bar-item path="#/home" name="首页" img="wylc1.png"></nav-bar-item>
      <nav-bar-item path="#/circle" name="朋友圈" img="logo-friends2.png"></nav-bar-item>
      <nav-bar-item path="#/user/center" name="我的91" img="wode911.png"></nav-bar-item>
    </nav-bar>
  </div>
</template>

<script>
  import TopNav from '@/components/TopNav'
  import NavBar from '@/components/NavBar'
  import NavBarItem from '@/components/NavBarItem'
  export default {
    name: 'circleIndex',
    data () {
      return {}
    },
    components: {
      TopNav, NavBar, NavBarItem
    }
  }
</script>

<style scoped>
  /*个人中心账户信息+朋友圈头像*/
  .person-wall {
    width: 100%;
    height: 13.25rem;
    overflow: hidden;
  }

  /*个人中心充值提现快捷按钮+投友圈统计*/
  .frame2 {
    width: 100%;
    height: 2.8rem;
    line-height: 2.8rem;
    position: relative;
    top: -5.5rem;
    text-align: center;
  }

  .frame2-bg {
    height: 100%;
    line-height: 2.8rem;
    display: block;
    float: left;
    text-align: left;
    width: 44%;
    margin: 0 4% 0 2%;
    font-size: 0.75rem;
    background: url(/static/img/user/btn11@2x.png);
    background-size: 100%;
    color: #2b2b2b;
  }

  .w2-pd5-bdr {
    width: 15%;
    padding: 0 .3rem;
    border-right: 1px dashed red;
  }

  .fs05 {
    font-size: .5rem;
  }

  .e42630 {
    color: #e42630;
  }

  .btn-bg-11 {
    font-size: initial;
    background-color: #e42630;
    color: #ffffff;
    padding: .3rem 1rem;
  }

  /*投友圈的样式*/
  /*投友圈的样式*/
  #circle-user {
    background: url(/static/img/user/banner@2x.png);
    background-size: 100%;
  }

  .circle-cont {
    position: relative;
    top: -12%;
  }

  .bg-top-right {
    position: absolute;
    right: 0;
    width: 3.5rem;
    height: 1.5rem;
  }
</style>
